<template>
  <div>
    <div >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>消息管理</el-breadcrumb-item>
        <el-breadcrumb-item>我的消息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <div>

      <el-form :inline="true" :model="queryObj"  style="margin-top: 15px" class="demo-form-inline">
        <el-form-item label="名称" style="float: left">
          <el-input v-model="queryObj.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button type="primary"  @click="_onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>




    <div style="margin-top: 20px">

<!--      <el-table-->
<!--        :data="getPage"-->
<!--        border-->
<!--        height="500"-->
<!--        style="width: 100%">-->
<!--        <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >-->
<!--          <template slot-scope="scope">-->
<!--            <span v-if="item.date">-->
<!--                        {{scope.row[item.prop]?$dateformat(scope.row[item.prop],'yyyy-mm-dd HH:mm:ss'):''}}-->
<!--                  </span>-->
<!--            <span v-else>{{scope.row[item.prop]}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          fixed="right"-->
<!--          label="操作"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button @click="makeReaded(scope.row.id)" type="text" size="small">设置为已读</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--      <el-pagination-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--        :current-page="currentPage"-->
<!--        :page-sizes="[5, 10, 20, 40]"-->
<!--        :page-size="pageSize"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="total">-->
<!--      </el-pagination>-->
      <EleTable ref="eleTableRef"
                url="/api/base/sys_msg_rel_user/pageVO"
                :columnName="columnName"
                :queryObj="queryObj"
                :optList="optList"
                @opt-click="_opt"
      >

      </EleTable>

    </div>
  </div>

</template>

<script>

  import EleTable from "../../common/EleTable.vue";

  export default {

    mounted(){
    },
    components:{
      EleTable
    },
    name: "Home",
    data(){
      return {
        queryObj:{},
        currentPage:1, //初始页
        pageSize:10,    //    每页的数据
        total:0,    //    每页的数据
        getPage:[],
        columnName:[
          {prop:"content",label:"消息内容",width:"120",fixed:true},
          {prop:"sender",label:"发送人",width:"120"},
          {prop:"sendTime",label:"发送时间",width:"120",date:true},
        ],
        optList:[
          {name:"设置为已读",key:'read'}
        ],
      }
    },
    methods:{
      handleClick(data){
        console.log(data);
      },

      handleSizeChange(val) {
        this.pageSize=val;
        this._page();
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this._page();
      },
      _opt(data,key){
        switch (key){
          case 'edit':
            alert('编辑');
            break;
          case 'read':
            this.makeRead(data.id);
            break;
        }
      },
      makeRead(id){
        this.$http.put('/api/base/sys_msg_rel_user/read/'+id,{id:id,isRead:1}).then(res=>{
          if (res.data.code === 0){
            this.$message({
              type: 'success',
              message: '设置成功!'
            });
          }
          this.$refs.eleTableRef._page();
        }).catch(err=>{
          console.log(err)
        });
      },
      _page(){

        this.$http.post('/sys_msg_rel_user/page_vc?rows='+this.pageSize+'&page='+this.currentPage,this.forObject).then(res=>{
          let data= res.data.data;
          this.getPage=data.records;
          this.total=data.total;
        }).catch(err=>{
          console.log(err)
        });
      },

      _edit(row){
        console.log(row);
        this.$refs.goodsCategoryEditRef._open(row);
      },

      _add(){
        this.$refs.goodsCategoryEditRef._open();
      },

      _onSearch(){
        this.$refs.eleTableRef._page();
      }


    },
  }
</script>

<style scoped>

</style>
